<template>
	<view class="content">
		<view class="hz">
			<view class="item">
				<view class="left">
					<text>联系姓名</text>
				</view>
				<view class="right">
					<input placeholder="输入联系姓名" v-model="addr.contacts" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>手机号</text>
				</view>
				<view class="right">
					<input placeholder="输入手机号" v-model="addr.mobile" />
				</view>
			</view>
		</view>
		<view class="hz">
			<view class="item2">
				<view class="left">
					<text>选择地址</text>
				</view>
				<view class="right">
					<text v-if="addr.addr!=''">{{addr.addr}}</text>
					<text v-else>点击右边图标设置</text>
					<image src="/static/my/dw.png" mode="widthFix" @tap="show=true"></image>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<text>详细地址</text>
				</view>
				<view class="right">
					<input placeholder="输入街道/楼牌号等" v-model="addr.detail_addr" />
				</view>
			</view>
		</view>
		<view class="hz">
			<view class="item2">
				<view class="left">
					<text>设为默认地址</text>
				</view>
				<view class="right">
					<u-switch v-model="addr.ismr" @change="change"></u-switch>
				</view>
			</view>
		</view>
		<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
		<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
		    @hideShow="show=false"></cc-selectDity>
		<!-- 按钮 -->
		<view class="btn" @tap="save()">
			<text>保存</text>
		</view>
	</view>
</template>

<script>
	import { checkMobile } from '@/common/utils.js'
	export default {
		data() {
			return {
				type: '',//1=添加,2=编辑
				addrId: '',
				
				addr: {
					contacts: '',
					mobile: '',
					addr: '',
					detail_addr: '',
					ismr: false,
				},
				
				show: false,
				province: '',
				city: '',
				area: '',
				areaCode: '',
			}
		},
		onLoad(option) {
			let type = option.type
			this.type = type
			if(type=='2'){//编辑
				let addrId = option.addrId
				this.addrId = addrId
				this.getAddr()
			}
		},
		methods: {
			changeClick(value, value2, value3, value4) {
			    this.province = value;
			    this.city = value2;
			    this.area = value3;
			    this.areaCode = value4;
			},
			//选中省市区
			onsetCity(e) {
			    let data = e.detail.target.dataset;
			    let address = data.province + data.city + data.area;
			    this.show = false
			    this.addr.addr = address
			},
			//获取地址
			async getAddr(){
				let data = await this.$request({
						url: '/d/addr/getAddr',
						data: {
							addrId: this.addrId
						},
				});
				
				let addr = data.data
				addr.ismr = addr.ismr=='1'?true:false
				this.addr = addr
			},
			save(){
				let type = this.type
				if(type=='1'){
					this.add()
				}else{
					this.edit()
				}
			},
			//添加
			async add(){
				//验参
				if(!this.addr.contacts){
					uni.showToast({
						icon:"none",
						title:"请输入联系姓名"
					})
					return
				}
				if(!checkMobile(this.addr.mobile)){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return
				}
				if(!this.addr.addr){
					uni.showToast({
						icon:"none",
						title:"请选择地址"
					})
					return
				}
				
				let data = await this.$request({
						url: '/d/addr/add',
						method: 'POST',
						data: {
							contacts: this.addr.contacts,
							mobile: this.addr.mobile,
							addr: this.addr.addr,
							detailAddr: this.addr.detail_addr,
							ismr: this.addr.ismr?'1':'0'
						},
				});
				//提示
				uni.showToast({
					icon:"success",
					title:"添加成功"
				})
				//2秒后跳回去
				setTimeout(function(){
					// 跳转回去
					let pages = getCurrentPages()
					// 没有上级页面，直接返回首页
					if (pages.length == 1) {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {// 有上级 返回
						let lastPageRoute = pages.slice(-2)[0].route; // 获取最近两个页面的路由信息数组，并选择第二个元素（即上次打开的页面）
						// 调用跳转函数，传入目标页面路由信息
						uni.navigateBack({
						    delta: 1, // 返回上一级页面
						});
						setTimeout(() => {
						    uni.reLaunch({
						        url: '/' + lastPageRoute, // 重新加载上次打开的页面
						    });
						}, 500); // 等待页面关闭动画完成后再进行跳转
					}
				},2000)
			},
			//编辑
			async edit(){
				//验参
				if(!this.addr.contacts){
					uni.showToast({
						icon:"none",
						title:"请输入联系姓名"
					})
					return
				}
				if(!checkMobile(this.addr.mobile)){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return
				}
				if(!this.addr.addr){
					uni.showToast({
						icon:"none",
						title:"请选择地址"
					})
					return
				}
				let data = await this.$request({
						url: '/d/addr/edit',
						method: 'POST',
						data: {
							addrId: this.addrId,
							contacts: this.addr.contacts,
							mobile: this.addr.mobile,
							addr: this.addr.addr,
							detailAddr: this.addr.detail_addr,
							ismr: this.addr.ismr?'1':'0'
						},
				});
				//提示
				uni.showToast({
					icon:"success",
					title:"编辑成功"
				})
				//2秒后跳回去
				setTimeout(function(){
					// 跳转回去
					let pages = getCurrentPages()
					// 没有上级页面，直接返回首页
					if (pages.length == 1) {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {// 有上级 返回
						let lastPageRoute = pages.slice(-2)[0].route; // 获取最近两个页面的路由信息数组，并选择第二个元素（即上次打开的页面）
						// 调用跳转函数，传入目标页面路由信息
						uni.navigateBack({
						    delta: 1, // 返回上一级页面
						});
						setTimeout(() => {
						    uni.reLaunch({
						        url: '/' + lastPageRoute, // 重新加载上次打开的页面
						    });
						}, 500); // 等待页面关闭动画完成后再进行跳转
					}
				},2000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.hz{
			margin-top: 20rpx;
			.item{
				background-color: #fff;
				padding: 30rpx;
				line-height: 50rpx;
				display: flex;
				border-bottom: 1rpx solid #F8F8F8;
				.left{
					width: 200rpx;
					font-weight: bold;
				}
				.right{}
			}
			.item2{
				background-color: #fff;
				padding: 30rpx;
				line-height: 50rpx;
				display: flex;
				border-bottom: 1rpx solid #F8F8F8;
				.left{
					width: 200rpx;
					font-weight: bold;
				}
				.right{
					margin-left: auto;
					color: #979797;
					display: flex;
					image{
						margin-top: 7rpx;
						margin-left: 10rpx;
						width: 36rpx;
					}
				}
			}
		}
		.btn{
			position: fixed;
			left: 25rpx;
			bottom: 120rpx;
			width: 700rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			text-align: center;
			background-color: #895FFF;
			font-size: $uni-font-size-lg;
			letter-spacing: 5rpx;
			color: #fff;
		}
	}
</style>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
